<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link th:href="@{/css/public/cropper/cropper.min.css}" rel="stylesheet">
    <link th:href="@{/css/public/cropper/ImgCropping.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15 table-search">
        <div class="layui-col-md12">
            <form class="layui-form" action="">
                <!--图片裁剪框 start-->
                <div class="tailoring-content">
                    <div class="tailoring-content-one">
                        <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                            选择图片
                        </label>
                    </div>
                    <div class="tailoring-content-two">
                        <div class="tailoring-box-parcel">
                            <img id="tailoringImg" src="">
                        </div>
                        <div class="preview-box-parcel">
                            <p>图片预览：</p>
                            <div class="square previewImg"></div>
                            <div class="circular previewImg"></div>
                        </div>
                    </div>
                    <div class="tailoring-content-three">
                        <button type="button" class="l-btn cropper-reset-btn">复位</button>
                        <button type="button" class="l-btn cropper-rotate-btn">旋转</button>
                        <button type="button" class="l-btn cropper-scaleX-btn">换向</button>
                        <button type="button" class="l-btn sureCut" lay-submit lay-filter="edit">确定修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:include="include::onload"></div>
<script th:src="@{/js/public/cropper/cropper.min.js}"></script>
<script th:src="@{/js/upload/upload.js}"></script>
<script  th:inline="javascript">
    layui.use(['element','form'], function(){
        var form = layui.form;
        //监听提交
        form.on('submit(edit)', function(){
            if ($("#tailoringImg").attr("src") == null ){
                return false;
            }else{
                var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                if(null == cas){
                    Layer.showFailMsg("请选择图片");
                    return false;
                }
                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                $("#finalImg").prop("src",base64url);//显示为图片的形式
                /*在全局new 一个 FormData()的对象*/
                var formData = new FormData();
                /*裁剪后处理里面*/
                var file = dataURLtoFile(base64url,[[${user.userId}]]+".png");
                formData.append('file', file);
                Layer.showLogin();
                /*最后 将fd 提交post 给后台 */
                $.ajax({
                    type: "post",
                    url: "/share/user-infor/image",
                    data: formData,
                    processData: false, // 不会将 data 参数序列化字符串
                    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function(date) {
                        Layer.showSucMsg(date.result);
                        Layer.closeLayer();
                    },
                    error: function(err) {
                        Layer.showFailMsg(err.result);
                    }
                });
            }
        });
    });
</script>
</body>
</html>